<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>Start with pixi.js</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.4.3/pixi.min.js"></script>
<script type="text/javascript">
//别名（Aliases）
var Container = PIXI.Container,
    autoDetectRenderer = PIXI.autoDetectRenderer,
    loader = PIXI.loader,
    resources = PIXI.loader.resources,
    TextureCache = PIXI.utils.TextureCache,
    Sprite = PIXI.Sprite;


var stage = new PIXI.particles.ParticleContainer(10000, {
      scale: false,
      position: false,
      rotation: false,
      uvs: false,
      alpha: false
    }),
    renderer = autoDetectRenderer(800, 800);
document.body.appendChild(renderer.view);

//读取文件的路径设置与读取后执行的函数
loader
  .add([
    "images/cat.png"
  ])
  .load(setup);

function setup() {
  var totalSprites = renderer instanceof PIXI.WebGLRenderer ? 10000 : 100;
  for(var i = 0; i < totalSprites; i++) {
    var dude = PIXI.Sprite.fromImage('images/cat.png');
    //设置中心点
    dude.anchor.set(0.5);
    //设置不同缩放值
    dude.scale.set(0.8 + Math.random() * 0.3);
    // 随机出现位置
    dude.x = Math.random() * renderer.width;
    dude.y = Math.random() * renderer.height;
    //添加到粒子容器中
    stage.addChild(dude);
  }
  renderer.render(stage);
}
</script>
</body>
</html>